<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input clearable v-model="listQuery.name" placeholder="商品名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input clearable v-model="listQuery.id" placeholder="商品ID" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input clearable v-model="listQuery.store_id" placeholder="公司ID" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.status" placeholder="状态" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.a" :value="item.b" />
      </el-select>


      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
        查询
      </el-button>
      <!-- <el-button @click="handleCreate" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" >
        添加
      </el-button> -->
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        Export
      </el-button> -->
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      >

      <el-table-column width="80px" align="center" label="用户ID">
        <template slot-scope="{row}">
          <span style="color:#1890ff;" @click="showuser(row.user_id)">{{ row.user_id }}</span>
        </template>
      </el-table-column>


      <el-table-column label="活动标题" >
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="主题图片" width="100px;" align="center">
        <template slot-scope="{row}">
          <img :src="baseimgurl+row.title_img" alt="" style="width:50px;height:50px;" @click="showvideo(row.title_img)">
        </template>
      </el-table-column>
      <el-table-column label="视频" width="100px;" >
        <template slot-scope="{row}">
          <el-button v-if="row.video" size="mini" type="primary" @click="showvideo2(row.video)">
            播放
          </el-button>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="{row}">
          <img v-for="el in row.img_list" :src="el" alt="" style="width:50px;height:50px;" @click="showvideo(row.title_img)">
        </template>
      </el-table-column>

      <el-table-column label="活动详情" >
        <template slot-scope="{row}">
          <el-button  size="mini" type="primary" @click="showtxt(row.context)">
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="时间" width="180px;">
        <template slot-scope="{row}">
          <span>{{ row.ctime|formatDate }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="ID"  sortable="custom" align="center" width="80" >
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" >
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品简介" >
        <template slot-scope="{row}">
          <span>{{ row.brief }}</span>
        </template>
      </el-table-column>
      <el-table-column label="售价"align="center">
        <template slot-scope="{row}">
          <span>{{ row.real_price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="原价"  align="center">
        <template slot-scope="{row}">
          <span>{{ row.original_price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="库存" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.stock_num }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          {{ row.ishow | statusFilte }}
        </template>
      </el-table-column> -->
      <el-table-column label="审核状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          {{ row.status | statusFn }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button v-if="row.status == 2" type="primary" size="mini" @click="passGooddata(row)">
          通过
          </el-button>

          <el-button v-if="row.status == 2" size="mini" type="danger" @click="bohuiData(row)">
            驳回
          </el-button>
          <!-- <el-button   type="success" size="mini" @click="gotodetails(row)">
          详情
          </el-button> -->

        </template>
      </el-table-column>

      <el-table-column label="驳回意见" >
        <template slot-scope="{row}">
          <span>{{ row.reject_msg||'-' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="dialogTxt" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">

        <!-- <el-form-item label="活动详情" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item> -->
        <!-- <el-form-item label="活动简介"  prop="brief">
          <el-input v-model="temp.brief" />
        </el-form-item> -->


        <!-- <el-form-item label="门店选择"  prop="store_id">
          <el-select v-model="temp.store_id" class="filter-item" placeholder="请先选择市场再选择门店" style="width:300px;">
            <el-option v-for="(item, idx) in shichangList" :key="idx" :label="item.store_name" :value="item.id" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="商品类型"  prop="category_id">
          <el-select v-model="temp.category_id" class="filter-item" placeholder="请先选择行业再选择类型" style="width:300px;">
            <el-option v-for="(item, idx) in catypeList" :key="idx" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="库存"  prop="stock_num">
          <el-input v-model="temp.stock_num" />
        </el-form-item>
        <el-form-item label="售价"  prop="real_price">
          <el-input v-model="temp.real_price" />
        </el-form-item>
        <el-form-item label="原价"  prop="original_price">
          <el-input v-model="temp.original_price" />
        </el-form-item>
        <el-form-item label="快递费"  prop="express_fee">
          <el-input v-model="temp.express_fee" />
        </el-form-item>
        <el-form-item label="积分"  prop="unit">
          <el-input v-model="temp.unit" />
        </el-form-item> -->


        <!-- <el-form-item label="是否展示">
          <el-switch
            v-model="temp.ishow"
            active-color="#13ce66"
            inactive-color="#ff4949">
            </el-switch>
        </el-form-item>
        <el-form-item label="是否退货">
          <el-switch
            v-model="temp.isretreat"
            active-color="#13ce66"
            inactive-color="#ff4949">
            </el-switch>
        </el-form-item>

        <el-form-item label="商品介绍"  prop="introduce">
          <el-input v-model="temp.introduce" />
        </el-form-item> -->

      </el-form>
      <el-form ref="dataForm2s" label-position="left" label-width="100px" style="width: 100%; margin-left:50px;">

        <!-- <el-form-item label="商品视频" prop="img_list">
          <el-upload
            action=""
            :multiple="true"
            accept="image/jpeg,image/png"
            :auto-upload="false"
            :show-file-list="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取</el-button>


          </el-upload>
        </el-form-item> -->

        <el-form-item label="商品视频" prop="video_url">
            <el-upload
              ref="$upload3"
              action=""
              class="video-uploader"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="onUploadvideo"
              accept="video/mp4, video/ogg, video/flv"
              >
              <el-button slot="trigger" size="small" type="primary">上传</el-button>
              <div slot="tip" class="el-upload__tip">
                <p v-if="!temp.video_url">video/mp4文件，且不能超过500MB</p>
                <video  v-if="temp.video_url" width="150" height="150" controls>
                  <source :src="temp.video_url"  type="video/mp4">
                </video>
              </div>
            </el-upload>
        </el-form-item>


        <!-- <el-form-item label="商品图片集"  prop="img_list">
          <el-upload
            action=""
            :multiple="true"
            accept="image/jpeg,image/png"
            :auto-upload="false"
            :show-file-list="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取</el-button>


          </el-upload>
        </el-form-item> -->
        <el-form-item label="资讯主图">
          <el-upload
            action=""
            ref="$upload2"
            accept="image/jpeg,image/png"
            :auto-upload="false"
            :on-change="onUploadxqimg"
            :show-file-list="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取</el-button>
            <div slot="tip" class="el-upload__tip">
              <p v-if="!imgList.length">只能上传jpg/png文件，且不能超过10m</p>
              <img v-for="el in imgList" style="width:100px;border:1px solid green;height:100px;margin-right:70px;" :src="el" alt="">
            </div>

          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="分类图片集" prop="img_list">
          <el-upload
            ref="$upload"
            action=""
            accept="image/jpeg,image/png"
            :on-change="onUploadxqimg2"
            :on-remove="handleRemove"
            :auto-upload="false"
            :show-file-list="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取</el-button>
            <div slot="tip" class="el-upload__tip">
              <p v-if="!temp.img_list.length">只能上传jpg/png文件，且单张不能超过1m</p>
              <img v-for =" ele in banner_list" style="width:100px;height:100px;margin-right:5px;" :src="ele" alt="">
              <img v-for="el in temp.img_list" v-if="!img_list.length" style="width:100px;border:1px solid green;height:100px;margin-right:5px" :src="el" alt="">
              <div class="">
                <el-button v-if="pic_filesList.length" size="small" @click="uploadimgsend2" type="primary">确认上传</el-button>
              </div>
            </div>

          </el-upload>
        </el-form-item> -->

        <el-form-item label="商品属性" prop="attribute">

        </el-form-item>
        <el-row v-for="(ele, idx) in timerules">
          <el-col :span="9">
            <el-form-item label="属性名" >
              <input type="text" class="inputsty " name="" ref="s_key_dom">
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="属性值">
              <input type="text" class="inputsty " name=""  ref="s_val_dom">
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-button v-if ="idx == timerules.length-1" type="primary" @click="addrules()">
              +
            </el-button>
            <el-button  v-if ="idx>=1" type="danger" @click="delrules(idx)">
              -
            </el-button>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submiteData">
          提交
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="detialShow">
      <div class="">
        {{detialTxt}}
      </div>
    </el-dialog>

    <el-dialog :visible.sync="showdialogvideo">
      <img :src="baseimgurl+showimgurl" alt="" style="width:780px;">
    </el-dialog>
    <el-dialog :visible.sync="showdialogvideo2">
      <video  width="800" height="500" controls>
        <source :src="baseimgurl+videourlshow"  type="video/mp4">
      </video>
    </el-dialog>
    <el-dialog title="市场审核驳回" :visible.sync="isbohui">
      <el-form ref="dataForm" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="驳回原因" prop="username">
          <el-input v-model="bohuistr" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isbohui = false">
          取消
        </el-button>
        <el-button type="primary" @click="bohuimain()">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="czimgbig" title="用户详情" v-loading="userloading">
      <el-form >
        <el-row>
          <el-col :span="9">

            <el-form-item label="用户名">
              <el-input   v-model="userData.nickname"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item label="用户积分">
              <el-input  v-model="userData.unit" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <el-form-item label="手机号">
              <el-input  v-model="userData.mobile"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item label="余额">
              <el-input v-model="userData.banlace"  />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form >

    </el-dialog>
  </div>
</template>

<script>
import { fetchStorenav, uploadImg } from '@/api/article'
import {  uploadVideo, addAdvertisementhome, getpaimailisthome,  getAllLinesStoreA} from '@/api/store'
import { getUserCardByInfo, getUserInfoByOrder } from '@/api/order'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
const __ = {
  formatDate: (date, fmt) => {
    const padLeftZero = (str) => {
      return ('00' + str).substr(str.length)
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        const str = o[k] + ''
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
      }
    }
    return fmt
  }
}
export default {
  name: 'goods',
  components: { Pagination },
  filters: {
    statusFn(n){
      if(n == 2) return '待审核';
      if(n == 1) return '已通过';
      if(n == 3) return '驳回';
    },
    statusFilte(n){
      // console.log(n,'=====')
      if(n == 1) return '上架';
      // if(n == 2) return '补货中';
      // if(n == 3) return '下架';
      return '下架';
    },
    formatDate(time) {
      console.log(time)
      return __.formatDate(new Date(time * 1000), 'yyyy-MM-dd hh:mm:ss')
    }
  },
  data() {
    return {

      detialTxt: '',
      detialShow :false,
      baseimgurl:'',
      showimgurl: '',
      showdialogvideo: false,
      showimgurl: '',
      showdialogvideo2: false,
      videourlshow: '',
      czimgbig: false,
      userData: {},
      userloading: false,
      timerules: [['','']],
      isbohui: false,
      bohuistr: '',
      reData: null,
      calendarTypeOptions: [{a: '待审核',b:2},{a: '已通过',b:1},{a: '驳回',b:3}],
      listLoading: false,
      total: 0,
      list: [],
      catypeList: [],

      shichangList: [],
      listQuery: {
        page: 1,

        limit: 20,
        // importance: undefined,
        id: undefined,

        status: undefined,
        name: undefined,
        store_id: undefined,
        category_id: undefined,
        // sort: '+id'
      },
      imgList: ['http://140.143.146.33/upload/goods/6fe99cc3-0d30-43dd-89a2-acd4bdf312f1.jpg','http://140.143.146.33/upload/goods/6fe99cc3-0d30-43dd-89a2-acd4bdf312f1.jpg','http://140.143.146.33/upload/goods/6fe99cc3-0d30-43dd-89a2-acd4bdf312f1.jpg','http://140.143.146.33/upload/goods/6fe99cc3-0d30-43dd-89a2-acd4bdf312f1.jpg','http://140.143.146.33/upload/goods/6fe99cc3-0d30-43dd-89a2-acd4bdf312f1.jpg','http://140.143.146.33/upload/goods/6fe99cc3-0d30-43dd-89a2-acd4bdf312f1.jpg',],
      temp: {
        nav_id: '13',
        shichang_id: '',
        store_id :'',
        category_id :'',
        img_list :'',
        video_url :'http://140.143.146.33/upload/goods/0af29f92-e42f-4c16-af47-5e7f55108660.mp4',
        title :'测试商品名字',
        brief :'商品简介',
        stock_num  :'1',
        real_price :'20000',
        original_price :'36000',
        unit: '',
        express_fee: '',
        status: 2,
        isretreat : true,
        ishow : true,
        introduce :'这里是商品介绍',
        attribute :''
      },
      dialogFormVisible: false,

      dialogTxt: '',

      rules: {
        title: [{ required: true, message: '商品名字 is required', trigger: 'blur' }],
        img_list: [{ required: true, message: '商品图片 is required', trigger: 'blur' }],
        store_id: [{ required: true, message: '门店ID is required', trigger: 'blur' }],
        // category_id: [{ required: true, message: '类型ID is required', trigger: 'blur' }],
        video_url: [{ required: true, message: '视频 is required', trigger: 'blur' }],
        brief: [{ required: true, message: '简介 is required', trigger: 'blur' }],
        introduce: [{ required: true, message: '介绍 is required', trigger: 'blur' }],
        stock_num: [{ required: true, message: '库存 is required', trigger: 'blur' }],
        real_price: [{ required: true, message: '售价 is required', trigger: 'blur' }],
        original_price: [{ required: true, message: '原价 is required', trigger: 'blur' }],
        attribute: [{ required: true, message: '商品属性 is required', trigger: 'blur' }],
      },
    }
  },
  watch:{

  },
  created() {
    this.getList();
    // this.getshichangList();
    // this.getstoreList(13);
  },
  methods: {
    showtxt(str){
      this.detialTxt = str;
      this.detialShow = true;
    },
    showvideo2(data){
      this.showdialogvideo2 = true;
      this.videourlshow = data;
    },
    showvideo(data){
      this.showdialogvideo = true;
      this.showimgurl = data;
    },
    showuser(id){
      this.userloading = true;
      getUserInfoByOrder({id}).then(res=>{
        this.userData = res;
        this.czimgbig = true
        this.userloading = false
      })
    },
    gotodetails(data){
        this.$router.push('/shop/goodsDetails?id='+data.id);
    },

    bohuimain() {
      if (!this.bohuistr) {
        return this.$message({
          message: '请填写驳回原因',
          type: 'error'
        })
      }
      const data = this.reData
      this.listLoading = true
      data['status'] = 3
      data['reject_msg'] = this.bohuistr
      addAdvertisementhome(data).then((res) => {
        this.$notify({
          title: 'Success',
          message: '审核成功！',
          type: 'success',
          duration: 2000
        })
        this.bohuistr = '';
        this.isbohui = false;
        this.reData = null;
        this.getList()
      });
    },
    bohuiData(data){
      this.bohuistr = '';
      this.isbohui = true;
      this.reData = data;
    },
    passGooddata(data){
      this.listLoading = true;
      this.$confirm(`确定要通过此审核 ？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data['status'] = 1;
        data['reject_msg'] = '';
        addAdvertisementhome(data).then((res) => {
          this.$notify({
            title: 'Success',
            message: '审核成功！',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })

      }).catch(() => {
        this.listLoading = false;
      });
    },
    resetTemp() {
      this.temp = {
        nav_id: '',
        shichang_id: '',
        store_id :'',
        category_id :'',
        img_list :'',
        video_url :'',
        title :'',
        status: 2,
        brief :'',
        stock_num  :'',
        real_price :'',
        original_price :'',
        unit: '',
        express_fee: '',
        isretreat : true,
        ishow : true,
        introduce :'',
        attribute :''
      };

      this.imgList = [];
    },
    getattributetoipt(){
      const list = [];
      const { s_key_dom , s_val_dom } = this.$refs;
      s_key_dom.forEach((el, idx)=>{
        let v_d = s_val_dom[idx].value,v_k = el.value;
        if(v_d && v_k)list.push({_key: v_k,_value: v_d})
      });
      return list;
    },
    submiteData(){
      const attrList = [ {_key: '颜色',_value: '白色'}];
      if(!attrList.length)return this.$message.error('请填写至少一项的属性信息!');
      if(this.temp['nav_id'] == 1){
        if(!this.temp['video_url'])return this.$message.error('请上传视频信息!');
        if(this.imgList.length < 6 )return this.$message.error('请上传6张图片信息!');
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          console.log(this.temp)
          const tempData = Object.assign({}, this.temp);
          tempData['ishow'] = Number(tempData['ishow']);
          tempData['img_list'] = this.imgList.join();
          tempData['attribute'] = JSON.stringify(attrList);
          tempData['isretreat'] = Number(tempData['isretreat']);
          addAdvertisement(tempData).then(() => {
            // this.resetTemp()
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Created Successfully',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })

    },
    getstoreList(id) {
      this.listLoading = true;
      this.temp.category_id = '';
      this.temp.shichang_id = '';

      fetchStorenav({id}).then(response => {
        this.catypeList = response;
        this.listLoading = false;
      });
    },
    getshichangList(id) {
      this.listLoading = true;
      this.temp.store_id = '';

      getAllLinesStoreA({navid: 13}).then(response => {
        this.shichangList = response;
        this.listLoading = false;
      });
    },

    handleCreate() {
      // this.resetTemp()
      this.dialogTxt = '添加商品'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        this.$refs['$upload2'].clearFiles();
        this.$refs['$upload3'].clearFiles();
      })
    },
    addrules(){
      this.timerules.push(['','']);
    },
    delrules(index){
      this.timerules.splice(index, 1)
    },

    onUploadxqimg(file) {
      if(this.imgList.length >=6)return this.$message.error('只能上传6张图片!');
      const _this = this
      const isIMAGE = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png');
      const isLt1M = file.size / 1024 / 1024 < 10;

      if (!isIMAGE) {
        this.$message.error('只能上传jpg/png图片!');
        return false;
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 10MB!');
        return false;
      }



      var formFile = new FormData()
      formFile.append('file', file.raw)
      formFile.append('fileName', 'goods')
      this.isupload = true
      uploadImg(formFile).then(response => {
        // _this.temp.xqimg = 'http://localhost:8092/public'+response.data;

        _this.imgList.push(response.fileUrl);
        _this.temp.img_list = _this.imgList.join();
      })
    },
    onUploadvideo(files) {
      const _this = this
      const file = files.raw
      console.log(file)
      const isVideo = file.type === 'video/mp4' || file.type === 'video/ogg' || file.type === 'video/flv';
      const isLt500MB = file.size / 1024 / 1024 < 500;

      if (!isVideo) {
        this.$message.error('请上传视频文件！');
      } else if (!isLt500MB) {
        this.$message.error('上传视频大小不能超过 500MB!');
      }
      var formFile = new FormData()
      formFile.append('file', file)
      formFile.append('fileName', 'goods')
      this.isupload = true
      uploadVideo(formFile).then(response => {
        // _this.temp.xqimg = 'http://localhost:8092/public'+response.data;
        _this.temp.video_url = response.fileUrl
      })
    },
    getList() {
      this.listLoading = true
      getpaimailisthome(this.listQuery).then(response => {
        // response.data.map(item => {
        //   // console.log(item)
        //   item['is_hot'] = !!item['is_hot'];
        //   item['is_on_sale'] = !!item['is_on_sale'];
        //     item.list_pic_url = item.list_pic_url.split(',');
        // })
        response.data.forEach((item, i) => {
          item['img_list'] = item['img_list'].split(',');
        });


        this.list = response.data
        this.total = response.count
        this.listLoading = false
        // Just to simulate the time of the request
        // setTimeout(() => {
        //   this.listLoading = false
        // }, 1.5 * 1000)
      })
    },

  }
}
</script>
